<template>
  <div>
    <el-tooltip effect="dark" placeholder="right"
                v-for="item in note"
                :key="item.noteId">
      <p slot="content" style="font-size: 13px;margin-bottom: 6px">
        <span>论文标题:{{ item.title }}</span>
        <span>评论数量：{{item.commentNum}}</span>
      </p>
      <el-card shadow="hover" class="note">
        <p class="note-title">
          <el-link target="_blank" type="primary" @click="viewNote(item.paperId,item.noteId)">
            <span style="font-size:large">针对论文：{{ item.title }}的笔记</span>
          </el-link>
        </p>
        <p class="note-comment-num">评论数量：{{item.commentNum}}</p>
        <p class="note-delete"><el-link target="_blank" type="danger" @click="deleteNote(item.noteId)" style="margin-left: 20px"><i class="el-icon-delete"></i>删除</el-link></p>
      </el-card>
    </el-tooltip>
    <el-row>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="note.length"
        class="pagination">
      </el-pagination>
    </el-row>
    <el-empty v-if="note.length===0">
      <p>还没有笔记哦</p>
    </el-empty>
  </div>
</template>

<script>
export default {
  name: "Note",
  data(){
    return{
      note:[],
      currentPage: 1,
      pageSize: 15,
    }
  },
  methods:{
    getNote(){
      this.$axios.get(`/note/getMyNote/page=${this.currentPage-1}`).then(res=>{
        this.note=res.data.data
      }).catch(failRes=>console.log(failRes))
    },
    /*
     查看笔记
    */
    viewNote(paperId,noteId){
      this.$router.push({
        name:'Note',
        params:{
          paperId:paperId,
          noteId:noteId,
          editable:this.$store.state.authority>1
        }
      })
    },
    /*
    删除笔记
     */
    deleteNote(id){
      this.$axios.get(`/note/delete/noteId=${id}`).then(()=>{
        this.getNote()
        this.$message.info('删除成功')
      }).catch(failRes=>console.log(failRes))
    },
    /*
      处理页号
     */
    handleCurrentChange(page) {
      this.currentPage = page
      this.loadAllPapers()
    },
  },
  mounted() {
    this.getNote()
  }

}
</script>

<style scoped>
.note-title{
  display: flex;
  right: 0;
}

.note-comment-num{
  display: flex;
  right:0;
}
.note-delete{
  display: flex;
  right:0;
}
</style>
